
/*核心展示区*/
.main-area{
    flex: 1;
    display: flex;
    flex-direction: row;
    margin: 0 20px 20px;
    overflow: hidden;
}
.main-area .main-left-area{
    /*width: 330px;*/
    width: 310px;
}
.main-area .main-center-area{
    flex: 1;
    margin:0 20px;
}
.main-area .main-right-area{
    /*width: 270px;*/
    width: 250px;
}

/*核心左侧*/
.main-area .main-left-area{
    display: flex;
    flex-direction: column;
}
.main-left-area .main-lefttop-area{
    height: 260px;
    margin-bottom: 20px;
}
.main-lefttop-chart{
    height: 216px;
}
.main-lefttop-data li,
.main-leftbottom-data li{
    float: left;
    width: 50%;
    text-align: center;
}
.main-lefttop-data li span,
.main-leftbottom-data li span{
    display: block;
    font-size: 24px;
    margin-bottom: 8px;
}
.main-left-area .main-leftbottom-area{
    flex: 1;
    display: flex;
    flex-direction: column;
}
.main-leftbottom-box{
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 -16px;;
}
.main-leftbottom-box .main-leftbottom-data{
    height: 60px;
    padding: 24px 0;
}
.main-leftbottom-box .main-leftbottom-list{
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
    /*margin: 0 -23px 0 -17px;*/
}

/*核心右区*/
.main-area .main-right-area{
    display: flex;
    flex-direction: column;
}
.main-right-area .main-right-box{
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 -16px;
}
.main-right-box .main-right-data{
    height: 30px;
    padding: 30px 0;
    /*margin: 0 -16px;*/
    border-bottom: 1px solid #3e7ea8;
}
.main-right-data>span{
    line-height: 30px;
    font-size: 36px;
}
.main-right-data>em{
    font-size: 18px;
}
.main-right-box .main-right-list{
    flex: 1;
    /*margin: 0 -22px 0 -16px;*/
    margin: 0;
    overflow: hidden;
    overflow-y: auto;
}
.main-right-list .wait-li{
    padding: 14px 0 18px;
    /*margin-right: 6px;*/
    border-bottom: 1px dashed #3e7ea8;
}
.main-right-list .wait-li:last-child{
    border: none;
    padding-bottom: 0;
}
.wait-li p{
    margin-top: 12px;
    overflow: hidden;
    line-height: 1.1;
}
.wait-li p span{
    color: #e5e5e5;
    font-size: 14px;
    float: left;
}
.wait-li p span:last-child{
    float: right;
}
.wait-li p span em{
    color: #fff799;
    padding: 0 4px;
}
.wait-chart{
    height: 12px;
    padding: 4px;
    background: rgba(0,0,0,.14);
}
.wait-chart .wait-chart-bar{
    height: 100%;
    width: 0;
    background: url("../images/wait_chart_bar.png") no-repeat 0 0;
}

/*核心地图区*/
.main-area .main-center-area{
    display: flex;
    flex-direction: column;
    position: relative;
}
.main-center-area .main-center-options{
    height: 40px;
    margin-bottom: 12px;
}
.center-options-left{
    float: left;
}
.center-options-left .new-select{
    float: left;
    margin-right: 12px;
}
.center-map-mark{
    position: absolute;
    bottom: 12px;
    right: 12px;
}
.center-map-mark .mark-box{
    float: right;
    line-height: 38px;
    color: #e5e5e5;
    font-size: 14px;
    padding: 0 14px;
    margin-top: 10px;
    border: 1px solid #5194d3;
    background: rgba(15,94,140,.9);
    box-shadow: inset 0 0 40px rgba(255,255,255,.06);
}
.center-map-mark .mark-box>em{
    display: inline-block;
    height: 5px;
    width: 24px;
    margin-bottom: 3px;
}
.center-map-mark .mark-box>span{
    display: inline-block;
    padding-right: 10px;
    line-height: 38px;
    color: #e5e5e5;
    font-size: 14px;
}
.center-map-mark .mark-box>span:last-child{
    padding-right: 0;
}
.center-map-mark .mark-box>span>img{
    margin-bottom: -2px;
}
.main-center-area .main-center-map{
    flex: 1;
    border: 1px solid #5194d3;
}
/*界面伸缩*/
.main-area.show-big{
    margin-right: 0;
}
.main-right-area.show-small{
    display: none;
}
.main-center-area .extend-btn{
    position: absolute;
    left: 100%;
    top: 50%;
    width: 22px;
    height: 58px;
    line-height: 50px;
    border: 1px solid #5194d3;
    background: rgba(15,94,140,.9);
    margin: -30px 0 0 -1px;
    text-align: center;
    color: #fff;
    cursor: pointer;
}
.main-center-area .extend-btn:hover{
    color: #fff799;
}

/*乘车点概况*/
.point-area{
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0 20px 20px;
}
.point-area .point-top-area{
    /*height: 465px;*/
    flex: 4;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
}
.point-top-area .point-topleft-area{
    width: 288px;
    margin-right: 20px;
}
.point-top-area .point-topright-area{
    flex: 1;
}
.point-area .point-bottom-area{
    /*flex: 1;*/
    flex: 3;
}
/*左上-专线巴士*/
.point-topleft-data{
    /*padding-top: 38px;*/
    padding-top: 20px;
    height: 50px;
}
.point-topleft-data p{
    line-height: 5px;
    font-size: 18px;
    text-align: center;
}
.point-topleft-data p span{
    color: #fff799;
    font-size: 36px;
    padding: 0 4px;
}
.point-topleft-chart{
    position: absolute;
    top:70px;
    bottom: -20px;
    left: -20px;
    right: -20px;
    /*height: 320px;*/
    /*margin: 0 -30px;*/
}
/*右上-人数比较*/
.point-topright-data,
.point-bottom-data{
    padding: 10px 0;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 24px;
}
.point-topright-data>em,
.point-bottom-data>em
{
    color: #fff799;
    font-size: 24px;
    line-height: 40px;
}
.point-topright-chart{
    /*height: 360px;*/
    position: absolute;
    top: 60px;
    left: -10px;
    right: -10px;
    bottom: -20px;
}
/*下部-数据表格*/
.point-bottom-area{
    display: flex;
    flex-direction: column;
}
.point-bottom-data .text-select>span{
    color: #fff;
}
.point-bottom-data .text-select>span em{
    font-size: 24px;
    line-height: 40px;
}
.point-bottom-data .text-select>span em:first-child{
    color: #fff799;
    cursor: pointer;
}
.point-bottom-data .text-select>ul{
    width: 280px;
}
.point-bottom-table{
    flex: 1;
    display: flex;
    flex-direction: row;
    /*height: fit-content;*/
}
.point-bottom-table>div{
    flex: 1;
    margin-right: 20px;
}
.point-bottom-table .person-table{
    flex-grow:4;
}
.point-bottom-table .car-table{
    flex-grow:7;
}
.point-bottom-table .trip-table{
    flex-grow:3;
    margin-right: 0;
}
.point-bottom-table table{
    /*display: block;*/
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.2);
}
.point-bottom-table table tr{
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.point-bottom-table table tr:first-child{
    height: 68px;
}
.point-bottom-table table tr:last-child{
    border-bottom: none;
}
.point-bottom-table table tr th:first-child{
    width: 124px;
}
.point-bottom-table table tr th,
.point-bottom-table table tr td{
    text-align: center;
    line-height: 20px;
}
.point-bottom-table table tr td,
.point-bottom-table table tr td span{
    color: #fff799;
    font-size: 20px;
    line-height: 36px;
}
.point-bottom-table table tr td em{
    display: block;
    color: rgba(255,255,255,.6);
    line-height: 1;
}
.point-bottom-table table tr th:nth-child(2n),
.point-bottom-table table tr td:nth-child(2n){
    background: #155378;
}

/*数据表格*/
.data-table{
    display: flex;
    flex-direction: column;
    background: rgba(0,0,0,.2);
}
.data-table-tr{
    flex: 1;
    display: flex;
    flex-direction: row;
    border-top: 1px solid rgba(255,255,255,.1);
}
.data-table .data-table-tr:first-child{
    flex: none;
    height: 68px;
    border: none;
}
.data-table-th,
.data-table-td{
    flex: 1;
    text-align: center;
    line-height: 20px;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    flex-direction: column;
}
.data-table-tr .data-table-th:first-child{
    flex: none;
    width: 124px;
}
.data-table-th span{
    line-height: 24px;
}
.data-table-th span em{
    font-size: 15px;
}
.data-table-td,
.data-table-td span{
    color: #fff799;
    font-size: 20px;
    line-height: 36px;
}
.data-table-td em{
    color: rgba(255,255,255,.6);
    line-height: 1;
}
.data-table-tr .data-table-th:nth-child(2n),
.data-table-tr .data-table-td:nth-child(2n){
    background: #155378;
}


/*航展区概况*/
.airshow-area{
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0 20px 20px;
}
.airshow-area .airshow-top-area{
    height: 440px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
}
.airshow-top-area .airshow-topleft-area{
    flex: 1;
    margin-right: 20px;
}
.airshow-top-area .airshow-topright-area{
    width: 280px;
}
.airshow-area .airshow-bottom-area{
    flex: 1;
    display: flex;
    height: fit-content;
}
/*右上-车辆统计*/
.airshow-topright-list{
    padding-top: 14px;
    margin: 0 -10px;
}
.airshow-topright-list .list-box{
    margin-right: 0;
    margin-bottom: 12px;
}
.airshow-topright-list .list-box .list-title{
    margin-bottom: 2px;
    height: 30px;
    line-height: 30px;
}
.airshow-topright-list .list-title .list-title-name{
    line-height: 30px;
}
.airshow-topright-list .list-box  .list-title-data{
    font-size: 20px;
    line-height: 30px;
}
/*左上-地图*/
.airshow-topleft-area{
    /*height: inherit;*/
    border: 1px solid #5194d3;
    position: relative;
}
.airshow-topleft-options{
    position: absolute;
    right: 10px;
    top:10px;
    z-index: 20;
    height: 40px;
}
.airshow-topleft-options .new-select{
    float: left;
    margin-left: 10px;
}
.airshow-topleft-options .new-select>span{
    color: #fff799;
}
.airshow-topleft-map{
    width: 100%;
    height: 100%;
}
.airshow-topleft-area .extend-btn{
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 70px;
    height: 38px;
    border: 1px solid #5194d3;
    background: rgba(15,94,140,.9);
    line-height: 30px;
    text-align: center;
    color: #fff;
    cursor: pointer;
}
.airshow-topleft-area .extend-btn:hover{
    color: #fff799;
}
/*下部地图*/
.airshow-bottom-chart{
    width: 100%;
    height: 100%;
    position: relative;
    bottom: -10px;
}
/*界面伸缩*/
.airshow-top-area.show-big{
    flex: 1;
}
.airshow-bottom-area.show-small{
    flex: none;
    height: 0;
}
.airshow-bottom-area.show-small .airshow-bottom-chart{
    height: 0;
    overflow: hidden;
}

/*客流概况*/
.crowd-area{
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0 20px 20px;
}
.crowd-area .crowd-top-area{
    height: 330px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
}
.crowd-top-area .crowd-topleft-area{
    flex: 1;
    margin-right: 20px;
    display: flex;
}
.crowd-top-area .crowd-topright-area{
    width: 320px;
    display: flex;
}
.crowd-area .crowd-bottom-area{
    flex: 1;
    display: flex;
    height: fit-content;
}
/*左上-客流*/
.crowd-topleft-area .crowd-topleft-chart{
    width: 100%;
    position: relative;
    bottom: -10px;
}
/*右上-分布*/
.crowd-topright-area .crowd-topright-chart{
    width: 100%;
    /*width: -webkit-fill-available;*/
    position: relative;
    bottom: -10px;
    /*margin: 0 -10px;*/
}
/*下部-热力图*/
.crowd-bottom-area .crowd-bottom-chart{
    width: 100%;
    position: relative;
    bottom: -10px;
}
.crowd-bottom-area .extend-btn{
    position: absolute;
    top: 20px;
    right: 10px;
    width: 70px;
    height: 38px;
    border: 1px solid #5194d3;
    background: rgba(15,94,140,.9);
    line-height: 30px;
    text-align: center;
    color: #fff;
    cursor: pointer;
}
.crowd-bottom-area .extend-btn:hover{
    color: #fff799;
}
/*界面伸缩*/
.crowd-top-area.show-small{
    height: 60px;
}
.crowd-top-area.show-small .crowd-topleft-chart{
    height: 0;
    overflow: hidden;
}
.crowd-top-area.show-small .crowd-topright-chart{
    height: 0;
    overflow: hidden;
}

/*详情弹窗*/
.details-div{
    width: 470px;
}
.details-div>h3{
    font-size: 30px;
    color: #fff799;
    line-height: 30px;
    margin-bottom: 30px;
}
.subdetails-div{
    position: absolute;
    top:0;
    bottom: 0;
    right: 0;
    width: 650px;
    overflow: hidden;
}
/*信息容器*/
.info-list{
    margin-bottom: 30px;
}
.info-list li{
    /*height: 18px;*/
    /*overflow: hidden;*/
    min-height: 22px;
    margin-bottom: 10px;
}
.info-list li>span{
    float: left;
    width: 4em;
    color: #a6bbcd;
    line-height: 22px;
    text-align: justify;
}
.info-list li>span:after {
    content:'';
    width: 100%;
    display: inline-block;
    overflow: hidden;
    height: 0;
}
.info-list li>p{
    margin-left: 80px;
    line-height: 22px;
}
.info-list li>p span{
    line-height: 22px;
}
/*监控容器*/
.camera-list{
    width: 700px;
    overflow: hidden;
}
.camera-list .camera-box{
    float: left;
    width: 334px;
    height: 204px;
    margin: 0 16px 16px 0;
    background: #111;
}
.camera-list .camera-box:nth-child(2n){
    margin-right: 0;
}
/*车辆列表*/
.subdetails-div>h4{
    display: block;
    line-height: 48px;
    font-size: 20px;
}
.subdetails-div>h4>span{
    font-size: 20px;
}
.subdetails-div .point-car-list{
    position: absolute;
    top:48px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    overflow-y: auto;
}
.point-car-list li{
    padding: 16px;
    background: rgba(255,255,255,.06);
    margin-bottom: 10px;
    margin-right: 12px;
}
.point-car-list li:hover{
    background: rgba(255,255,255,.1);
}
.point-car-list li>div{
    margin-bottom: 10px;
    overflow: hidden;
}
.point-car-list li>div>span{
    font-size: 18px;
    margin-right: 12px;
    color: #fff799;
    line-height: 20px;
    float: left;
}
.point-car-list li>div>em{
    float: left;
    font-size: 14px;
    color: #e5e5e5;
    line-height: 20px;
}
.point-car-list li>div>em:last-child{
    float: right;
}
.point-car-list li>p{
    font-size: 12px;
    color: #a6bbcd;
    margin-bottom: 12px;
}
.point-car-list li:last-child,
.point-car-list li>p:last-child{
    margin-bottom: 0;
}
.point-car-list.scroll-box::-webkit-scrollbar{
    width: 8px;
    height: 8px;
    background-color: #105986;
    border-radius: 4px;
}
.point-car-list.scroll-box::-webkit-scrollbar-thumb{
    background: #105077;
}
.point-car-list.scroll-box::-webkit-scrollbar-thumb:hover{
    background: #105077;
}
/*地图容器*/
.map-box{
    width: 100%;
    height: 100%;
}
.map-error-tip{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 18px;
    z-index: 999;
    text-align: center;
}
.map-error-tip>span{
    display: inline-block;
    line-height: 44px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    padding: 0 26px;
    background: rgba(239,81,81,.96);
    box-shadow: 0 5px 16px rgba(239,81,81,.6);
}
.map-box-error .map-error-tip{
    display: block;
}

/*日报*/
.report-area{
    flex: 1;
    border: 1px solid #5194d3;
    background: rgba(15,94,140,.9);
    margin: 0 20px 20px;
}